import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Image,
    FlatList,
    StatusBar,
    TextInput,
    ScrollView,
    Picker,
    DeviceEventEmitter
} from 'react-native';
import { base } from "../../../../assets/style";
import LinearGradient from "react-native-linear-gradient";
import ReactNativePickerSelect from 'react-native-picker-select'
import { API } from "../../../../api";
import Toast from 'react-native-easy-toast'
import Loading from '../../../../components/loading/index'
import md5 from 'md5'
import { i18n } from "../../../../utils/locales/i18n";
import {PASS_REGEXP} from "../../../../config";

type Props = {};
export default class ModifyPassword extends Component<Props> {
    static navigationOptions = ({ navigation }) => {
        return {
            title: i18n.t('info26'),
            headerStyle: {
            },
            headerTintColor: '#0f0f0f',
            headerBackTitle: null
        }
    };
    constructor() {
        super();
        this.state = {
            originPassword: '',
            newPassword: '',
            newPassword2: '',
            showLoading: false,
            info: ''
        }
    }
    modifyPassword = async () => {
        if (!this.state.originPassword.trim()  || !this.state.newPassword.trim()  || !this.state.newPassword2.trim() ) {
            this.refs.toast.show(i18n.t('plz_cpl'))
            return
        }
        if (this.state.originPassword.trim() === this.state.newPassword.trim()) {
            this.refs.toast.show(i18n.t('info27'))
            return
        }
        if (this.state.newPassword.trim() !== this.state.newPassword2.trim()) {
            this.refs.toast.show(i18n.t('info28'))
            return
        }
	    if (!PASS_REGEXP.test(this.state.newPassword)) {
		    this.refs.toast.show(i18n.t('i240'));
		    return
	    }
        const reqData = {
            oldPassword: md5(md5(this.state.originPassword)),
            newPassword: md5(md5(this.state.newPassword))
        }
        this.setState({
            showLoading: true,
            info: i18n.t('loading')
        })
        const res = await API._fetch('modifyLoginPassword', reqData)
        this.setState({
            showLoading: false,
            info: ''
        })
        if (res && res.code === 10000) {
            // 修改成功
            this.refs.toast.show(res.msg || i18n.t('o_success'))
            setTimeout(() => {
                DeviceEventEmitter.emit('refresh_user_info');
                this.props.navigation.goBack()
            }, 1000)
        } else {
            this.refs.toast.show(res.msg || i18n.t('o_defeat'))
        }

    }
    render() {
        return (
            <View style={[base.flex_1, base.bg_gray, base.content_container]}>
                { this.state.showLoading ? (
                    <Loading
                        info={this.state.info}
                    />
                ) : null}
                <Toast ref={'toast'}
                       position={'bottom'}
                       positionValue={200}
                       fadeInDuration={750}
                       fadeOutDuration={1000}
                       opacity={0.8}/>
                <View style={{paddingHorizontal: 15, paddingBottom: 40, backgroundColor: '#fff', alignItems: 'center', marginTop: 10, borderRadius: 5 }}>
                    <View style={[base.flex_col_center, { height: 80 }]}>
                        <Text style={[base.color_gray, { fontSize: 20, color: '#0f0f0f' }]}>{ i18n.t('info26') }</Text>
                    </View>
                    <View style={[base.flex_row_between, { marginVertical: 10, height: 45, width: '100%', borderRadius: 5, borderWidth: 0.5, borderColor: '#d2d2d2', paddingHorizontal: 15 }]}>
                        <TextInput
                            style={[base.color_gray, {width: '100%'}]}
                            value={this.state.originPassword}
                            onChangeText={(text) => this.setState({originPassword: text})}
                            secureTextEntry={true}
                            placeholder={i18n.t('info29')}
                        />
                    </View>
                    <View style={[base.flex_row_between, { marginVertical: 10, height: 45, width: '100%', borderRadius: 5, borderWidth: 0.5, borderColor: '#d2d2d2', paddingHorizontal: 15 }]}>
                        <TextInput
                            style={[base.color_gray, {width: '100%'}]}
                            value={this.state.newPassword}
                            onChangeText={(text) => this.setState({newPassword: text})}
                            secureTextEntry={true}
                            placeholder={i18n.t('info30')}
                        />
                    </View>
                    <View style={[base.flex_row_between, { marginVertical: 10, height: 45, width: '100%', borderRadius: 5, borderWidth: 0.5, borderColor: '#d2d2d2', paddingHorizontal: 15 }]}>
                        <TextInput
                            style={[base.color_gray, {width: '100%'}]}
                            value={this.state.newPassword2}
                            onChangeText={(text) => this.setState({newPassword2: text})}
                            secureTextEntry={true}
                            placeholder={i18n.t('info31')}
                        />
                    </View>
                    {/*<View style={{ height: 45, width: '100%', borderColor: '#d2d2d2', borderWidth: 1, borderRadius: 5, marginVertical: 10, flexDirection: 'row' }}>*/}
                        {/*<TextInput*/}
                            {/*style={{color: '#808080', height: '100%', flex: 1, paddingLeft: 15, borderRightColor: '#d2d2d2', borderRightWidth: 1}}*/}
                            {/*onChangeText={(text) => this.setState({messageCode: text})}*/}
                            {/*placeholder={'邮箱验证码'}*/}
                            {/*value={this.state.messageCode}*/}
                        {/*/>*/}
                        {/*<TouchableOpacity style={{width: 100, height: '100%'}}>*/}
                            {/*<View style={[base.flex_1, base.flex_row_center]}><Text style={[base.color_orange, {fontSize: 16}]}>点击获取</Text></View>*/}
                        {/*</TouchableOpacity>*/}
                    {/*</View>*/}
                </View>
                <View style={[base.flex_1, base.flex_col_center, { paddingBottom: 30 }]}>
                    <TouchableOpacity style={{width: '100%'}} onPress={this.modifyPassword}>
                        <LinearGradient
                            start={{x: 0, y: 0}}
                            end={{x: 1, y: 1}}
                            colors={['#feac1c', '#ff7506']}
                            style={{ width: '100%', height: 46, borderRadius: 23, justifyContent: 'center', alignItems: 'center' }}
                        >
                            <Text style={{color: '#fff', fontSize: 16}}>{i18n.t('save')}</Text>
                        </LinearGradient>
                    </TouchableOpacity>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
});
